<template>
  <image
    class="nav-bar-bg"
    :style="{
      height: `${navbarHeight}px`,
      opacity: opacity,
    }"
    :src="bannerList.length > 0 ? bannerList[current].imageUrl : img"
    mode="bottom"
  />
  <div class="banner-menu">
    <div
      class="banner"
      :style="{
        filter: `blur(${filter}px)`,
      }"
    >
      <swiper
        v-if="bannerList.length > 0"
        class="swiper"
        circular
        :current="current"
        @change="currentChange"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image class="img" :src="item.imageUrl" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <div class="indicator" v-if="bannerList.length > 1">
        <div
          v-for="(item, index) in bannerList"
          :key="index"
          :class="{ active: current === index, dot: true }"
        ></div>
      </div>
    </div>
    <div class="menu">
      <div class="item active" @click="toJoin()">
        <image class="icon" src="./images/join.png" mode="scaleToFill" />
        <span>入驻合作</span>
      </div>
      <div class="item active">
        <image class="icon" src="./images/shop.png" mode="scaleToFill" />
        <span>商城</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { to } from '@/utils/page'
import { useUserStore } from '@/store/index'
import { useNavBarConfig } from '@/utils/index'
import img from './images/banner.jpg'

defineOptions({
  name: 'MenuBanner',
})

const props = defineProps(['scrollTop'])
const { navbarHeight } = useNavBarConfig()

const filter = computed(() => {
  const filter = Math.floor(props.scrollTop / 50)
  return filter > 10 ? 10 : filter
})
const opacity = computed(() => {
  return (props.scrollTop - 100) / 350
})

// 获取banner数据
const bannerList = ref([])
const current = ref(0)
function currentChange({ detail }) {
  current.value = detail.current
}
http
  .get('/banner/open/list', {})
  .then((res: any) => {
    if (res.length > 10) {
      res.length = 10 // 最多同时显示10张
    }
    bannerList.value = res
  })
  .finally(() => {
    if (bannerList.value.length === 0) {
      bannerList.value.push({
        imageUrl: img,
      })
    }
  })

function toJoin() {
  const userStore = useUserStore()

  if (userStore.isLogged) {
    to('/pages-sub/join-in/index')
  } else {
    userStore.setShowModal(true)
  }
}
</script>
<style lang="scss" scoped>
.nav-bar-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
}
.banner-menu {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 800rpx;
  overflow: hidden;
  background-color: transparent;

  .banner {
    position: relative;
    width: 100vw;
    height: 800rpx;
    .swiper,
    .bg {
      width: 100%;
      height: 100%;
      .img {
        width: 100vw;
        height: 800rpx;
      }
    }
    .indicator {
      position: absolute;
      bottom: 220rpx;
      left: 0;
      z-index: 2;
      display: flex;
      justify-content: center;
      width: 100%;
      .dot {
        width: 16rpx;
        height: 16rpx;
        margin: 0 3rpx;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 8rpx;
        transition: all 0.3s;
        &.active {
          width: 32rpx;
          background-color: #fff;
        }
      }
    }
  }
  .menu {
    position: absolute;
    bottom: 40rpx;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 30rpx;
    .item {
      display: flex;
      // width: 158rpx;
      flex: 1;
      align-items: center;
      justify-content: center;
      height: 124rpx;
      margin-right: 20rpx;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 30rpx;
      &:last-child {
        margin-right: 0;
      }
      .icon {
        width: 65rpx;
        height: 65rpx;
        margin-right: 10rpx;
      }
      span {
        font-size: 27rpx;
        color: #fff;
      }
    }
  }
}
</style>
